<template>
  <audio ref="audioRef" class="msg-audio" :src="mp3" :autoplay="false"></audio>
</template>

<script setup lang="ts">
import { computed, watch, ref } from "vue";
import mp3 from "@/assets/new_msg.mp3";
import { useMsg } from "@/store/useMsg";

const msgStore = useMsg();
const getMsgAudioStatus = computed(() => msgStore.getMsgAudioStatus);

const audioRef = ref();
watch(
  getMsgAudioStatus,
  (val) => {
    if (val) {
      audioRef.value.play();
    }
  },
  { immediate: true }
);
</script>

<style scoped lang="scss">
.msg-audio {
  opacity: 0;
  position: absolute;
  top: 99999px;
  left: 0;
}
</style>
